<script>
import OverLap from './overlap';
import TemplateModules from './TemplateModules';

//左侧操作面板配置
const leftPanel = [{ type: 'LayerManager', visible: true }, { type: 'Analys', visible: false }];

export default {
  name: 'OverLapTemplates',
  components: { ...OverLap, TemplateModules },
  props: {
    //模板选项
    options: {
      type: Object,
      default() {
        return {
          mode: 'view',
          data: [],
          info: {},
          settings: {},
        };
      },
    },
  },
  data() {
    return {
      showSetting: true,
      settingName: '图层管理',
      activeName: 'layermanager',
      mapData: [],
      bottomPanelState: 2,
      leftPanelState: 1,
      isAnalys: false,
      overLapService: '',
      leftPanel,
      isShowFlow: false,
      isShowStyle: false,
      flowAnalysData: {},
    };
  },
  computed: {
    menuitemClasses() {
      return ['menu-item', this.isCollapsed ? 'collapsed-menu' : ''];
    },
    //底部面板样式
    bottomPanelClass() {
      return {
        'result-map-edit': this.options.mode !== 'view',
        closed: this.bottomPanelState === 0,
        collapsed: this.bottomPanelState === 2,
        filled: this.leftPanelState === 0,
        leftcollapsed: this.leftPanelState === 2,
      };
    },
    //左部面板样式
    leftPanelClass() {
      return {
        leftcollapsed: this.leftPanelState === 2,
      };
    },
    //Icon样式
    collapseIcon() {
      if (this.bottomPanelState === 1) {
        return 'ios-arrow-down';
      } else if (this.bottomPanelState === 2) {
        return 'ios-arrow-up';
      }
      return '';
    },
    leftPanelIcon() {
      if (this.leftPanelState === 1) {
        return 'arrow-left-c';
      } else {
        return 'arrow-right-c';
      }
    },
  },
  events: {
    'on-show-analys': 'showAnalys',
    'on-show-flow': 'showFlowAnaly',
  },
  mounted() {
    this.leftPanel = [{ type: 'LayerManager', visible: true }, { type: 'Analys', visible: false }];
  },
  beforeDestroy() {
    this.leftPanel = [{ type: 'LayerManager', visible: true }, { type: 'Analys', visible: false }];
  },
  methods: {
    showAnalys(data) {
      this.getAnalys(data);
    },
    selectMenu(name) {
      this.showSetting = true;
      this.leftPanelState = 1;
      this.filterMenuName(name);
      const state = {
        layermanager() {},
        analys() {},
      };
      state[name].call(this);
    },
    // 过滤当前标题值
    filterMenuName(name) {
      const menuConfig = [
        { name: 'layermanager', alias: '图层管理', components: 'LayerManager' },
        { name: 'analys', alias: '对比分析', components: 'Analys' },
      ];
      const menuFilter = menuConfig.filter(item => item.name === name);
      if (menuFilter.length !== 0) {
        this.settingName = menuFilter[0].alias;
        this.leftPanel.forEach(panel => {
          if (panel.type === menuFilter[0].components) {
            panel.visible = true;
          } else {
            panel.visible = false;
          }
        });
      }
    },
    // 关闭设置栏
    settingClose() {
      this.showSetting = false;
      this.leftPanelState = 0;
    },
    // 得到地图信息
    getMapData(mapdata) {
      this.mapData = mapdata;
    },
    //设置底部面板状态
    setCollapseState() {
      this.bottomPanelState === 1 ? (this.bottomPanelState = 2) : (this.bottomPanelState = 1);
    },
    //设置左部面板状态
    setLeftPanelState() {
      this.leftPanelState === 1 ? (this.leftPanelState = 2) : (this.leftPanelState = 1);
    },
    // 叠加分析结果
    getAnalys(data) {
      if (!this.isAnalys) {
        this.isAnalys = true;
      } else {
        const that = this;

        if (that.overLapLayerData && that.overLapLayerData.layers !== data.layers) {
          const mapData = that.mapData.filter(item => item.num === 3);
          that.$store.commit(`${mapData[0].mapId}/SET_MAP_GOCLAYER_DELETE`, [
            that.overLapLayerData.layers,
          ]);
        }

        this.addOverLapLayer(true, data);
      }
      this.overLapLayerData = data;
    },
    // 添加叠加分析图层
    addOverLapLayer(isAdd, data) {
      if (isAdd) {
        const mapData = this.mapData.filter(item => item.num === 3);
        this.overLapService = `${this.overLapLayerData.url}?typeName=${
          data ? data.layers : this.overLapLayerData.layers
        }`;
        this.bottomPanelState = 1;
        this.$nextTick(() => {
          if (this.overLapLayerData) {
            this.$store.commit(`${mapData[0].mapId}/SET_MAP_SERVICELIST`, {
              [this.overLapLayerData.layers]: [
                {
                  servicestype: 12,
                  servicesurl: `${
                    this.overLapLayerData.baseUrl
                  }?service=WMS&version=1.1.1&request=GetMap&layers=${
                    this.overLapLayerData.layers
                  }&srs=${this.overLapLayerData.crs}&bbox=${this.overLapLayerData.bbox}`,
                  title: `${[this.overLapLayerData.layers]}`,
                },
                {
                  servicestype: 6,
                  servicesurl: `${
                    this.overLapLayerData.baseUrl
                  }?service=WFS&version=1.1.1&request=GetFeature&typeName=${
                    this.overLapLayerData.layers
                  }&maxFeatures=10&outputFormat=application%2Fjson&request=DescribeFeatureType`,
                  title: `${[this.overLapLayerData.layers]}`,
                },
              ],
            });
          }
          this.setQuery(this.overLapLayerData.type, data);
        });
      }
    },
    setQuery(type, data) {
      const state = {
        wfsQuery() {
          this.$refs.overlaplist.wfsQuery(1, {}, true, data ? data : this.overLapLayerData);
        },
        overLapChanges() {
          this.$refs.overlaplist.dltbChanges(1, data ? data : this.overLapLayerData, true);
        },
        flowAnalys() {
          this.flowAnalysData = data ? data : this.overLapLayerData;
        },
      };
      state[type].call(this);
    },
    showFlowAnaly() {
      this.isShowFlow = true;
    },
    //窗口关闭事件
    hidden() {
      this.$refs.window.hide();
      this.isShowFlow = false;
    },
    hiddenStyle() {
      this.$refs.styleWindow.hide();
      this.isShowStyle = false;
    },
    // 样式管理
    managerStyle() {
      this.isShowStyle = true;
    },
  },
};
</script>

<template>
  <div class="datav-overlap-template">
    <Layout>
      <Sider
      >
        <Menu
          :class="menuitemClasses"
          :active-name="activeName"
          theme="dark"
          width="auto"
          @on-select="selectMenu">
          <MenuItem name="layermanager">
          <div>
            <Icon
              type="map"
              color="#fff"></Icon>
            <span>图层管理</span>
          </div>
          </MenuItem>
          <MenuItem name="analys">
          <div>
            <Icon
              type="soup-can"
              color="#fff"></Icon>
            <span>对比分析</span>
          </div>
          </MenuItem>
        </Menu>
        <div
          slot="trigger"
          class="set-style">
          <Tooltip
            content="样式管理"
            transfer
            placement="right">
            <Icon
              type="ios-star-half"
              size="28"
              color="#fff"
              @click.native="managerStyle"></Icon>
          </Tooltip>

        </div>
      </Sider>
      <div
        v-if="showSetting"
        :class="leftPanelClass"
        class="datav-setmenu">
        <div class="setting-header">
          <h3>{{ settingName }}</h3>
          <div class="header-icon">
            <Icon
              :type="leftPanelIcon"
              size="20"
              @click.native="setLeftPanelState"></Icon>
            <Icon
              v-if="leftPanelState !== 2"
              type="ios-close-outline"
              size="20"
              @click.native="settingClose"></Icon>
          </div>
        </div>
        <TemplateModules
          v-show="leftPanelState !== 2"
          :types="leftPanel"
          :options="{mapData,options}"
        >
        </TemplateModules>
      </div>
      <div
        :class="bottomPanelClass"
        class="overlap-result-panel">
        <div class="overlap-result-panel-header">
          <h3 class="result-tabs-header">
            对比分析结果
          </h3>
          <div class="overlap-result-panel-actions">
            <div class="overlap-result-panel-buttons">
              <Icon
                :type="collapseIcon"
                title="收起/折叠"
                class="weight-font-icon"
                @click.native="setCollapseState"/>
            </div>
          </div>
        </div>
        <div class="overlap-result-panel-content">
          <OverLapList
            ref="overlaplist"
            :service="overLapService"
            :map-data="mapData"></OverLapList>
        </div>
      </div>
      <div
        :class="options.mode=== 'view'?'datav-map-view':'datav-map-edit'"
        class="datav-overlap">
        <OverLapMap
          ref="overlapmap"
          :is-analys="isAnalys"
          @on-get-mapdata="getMapData"
          @on-set-overlaplayer="addOverLapLayer"></OverLapMap>
      </div>
    </Layout>
    <Window
      ref="window"
      v-model="isShowFlow"
      :width="800"
      :height="600"
      :collapsible="false"
      title="流向分析"
      footer-hide
      transfer
      @on-cancel="hidden">
      <FlowAnalysis
        :analys-data="flowAnalysData"
        :map-data="mapData"
        :service="overLapService"></FlowAnalysis>
    </Window>
    <Window
      ref="styleWindow"
      v-model="isShowStyle"
      :width="835"
      :height="616"
      :collapsible="false"
      title="样式管理"
      footer-hide
      transfer
      @on-cancel="hiddenStyle">
      <ManagerStyle
        :is-show-style="isShowStyle"
        :map-data="mapData"
        :service="overLapService"></ManagerStyle>
    </Window>
  </div>
</template>

<style lang="less" scoped>
.datav-overlap-template {
  width: 100%;
  height: 100%;
  overflow: hidden;

  /deep/ .k-layout-sider {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    flex: 0 0 80px !important;
    z-index: 902;
  }

  .set-style {
    position: absolute;
    bottom: 20px;
    left: 30%;
    cursor: pointer;
  }

  .set-style:hover {
    .k-icon {
      color: rgb(45, 140, 240) !important;
    }
  }

  .layout {
    background: #f5f7f9;
    position: relative;
    overflow: hidden;

    .k-layout {
      height: calc(~'100vh');
      position: relative;
      overflow: hidden;
    }
  }
  .datav-setmenu {
    position: relative;
    display: inline-block;
    width: 300px;
    height: 100%;
    background-color: #f9f9f9;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 901;
    opacity: 0.7;
    transition: transform 0.4s;

    &.leftcollapsed {
      transform: translate(-265px, 0px);
    }

    .setting-header {
      position: relative;
      background-color: #fff;

      h3 {
        height: 40px;
        line-height: 40px;
        padding-left: 15px;
        font-size: 14px;
      }

      .header-icon {
        position: absolute;
        top: 10px;
        right: 10px;

        .k-icon {
          float: left;
          cursor: pointer;

          &:last-child {
            margin-left: 10px;
          }
        }
      }
    }

    .setting-content {
      width: 100%;
      height: calc(~'100vh - 40px');
      overflow-y: auto;
      overflow-x: hidden;
    }
  }

  .datav-setmenu:hover {
    opacity: 1;
  }

  .result-map-edit {
    right: 0 !important;
  }

  .overlap-result-panel {
    position: absolute;
    left: 380px;
    right: 10px;
    bottom: 0;
    height: 260px;
    background-color: #f1f1f1;
    border-left: 1px solid #dddddd;
    transition: all 0.4s ease;
    z-index: 1000;
    overflow: hidden;
    &.collapsed {
      bottom: -230px;
    }
    &.closed {
      bottom: -260px;
    }
    &.filled {
      left: 80px;
    }
    &.leftcollapsed {
      left: 115px;
    }
    .overlap-result-panel-header {
      border-bottom: 1px solid #495060;
      display: flex;
    }
    .result-tabs-header {
      margin-left: 20px;
      line-height: 30px;
    }
    .overlap-result-panel-actions {
      flex: 1;
      padding-left: 5px;
    }
    .overlap-result-panel-buttons {
      float: right;
      padding-right: 5px;
      .k-icon {
        padding: 9px 6px;
        cursor: pointer;
      }
      .weight-font-icon {
        font-weight: bold;
      }
    }
    .overlap-result-panel-content {
      padding: 2px;
      overflow: auto;
    }
  }

  .k-menu-item {
    padding: 8px 0;
    display: inline-block;
    width: 100%;
    text-align: center;
    border: none;
  }

  .k-menu-dark.k-menu-vertical .k-menu-item-active:not(.k-menu-submenu),
  .k-menu-dark.k-menu-vertical .k-menu-submenu-title-active:not(.k-menu-submenu) {
    border-right: none;
  }

  .k-menu-item:hover > div,
  .k-menu-dark.k-menu-vertical .k-menu-item-active:not(.k-menu-submenu) > div,
  .k-menu-dark.k-menu-vertical .k-menu-submenu-title-active:not(.k-menu-submenu) > div {
    width: 80%;
    background-color: #20a1ff;
    margin: 0 auto;
    border-radius: 10px;
  }

  .menu-item span {
    display: inline-block;
    vertical-align: bottom;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    transition: width 0.2s ease 0.2s;
    font-size: 12px;
    color: #fff !important;
  }

  .menu-item i {
    margin-right: 0;
    vertical-align: middle;
    transform: translateX(0px);
    transition: font-size 0.2s ease, transform 0.2s ease;
  }

  .collapsed-menu span {
    width: 0px;
    transition: width 0.2s ease;
  }

  .collapsed-menu i {
    transform: translateX(5px);
    transition: font-size 0.2s ease 0.2s, transform 0.2s ease 0.2s;
    vertical-align: middle;
    font-size: 22px;
  }

  .k-layout {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .datav-overlap {
    position: absolute;
    right: 10px;
    left: 80px;
    bottom: 0;
    background: #fff;
    background-color: #eee;
  }
  .datav-map-edit {
    top: 0px;
    right: 0px;
  }
  .datav-map-view {
    top: 0;
  }
}
/deep/ .k-window {
  top: 80px;
  left: 400px;
}
</style>
